<template>
  <div class="search-box">
    <el-input
        v-model="query.key"
        placeholder="标题"
        class="search-input mr10"
        clearable
    ></el-input>
    <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
  </div>
  <div class="image-container">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column align="center" label="标题" prop="title"/>
      <el-table-column align="center" label="发布时间" prop="publishTime" :formatter="dateFormat"/>
      <el-table-column align="center">
        <template #default="scope">
          <el-button size="small" type="warning" @click="preView(scope.row)"
          >预览
          </el-button
          >
          <el-button size="small" type="primary" @click="choose(scope.row)" :disabled="scope.row.isPublish == 0"
          >选择
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="query.page"
                     :page-size="query.size" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive} from "vue";
import milestone from "../api/milestone";
import {Search} from "@element-plus/icons-vue";
import base from "../utils/base";

const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);

const props = defineProps({
  update: {
    type: Function,
    required: true,
  },
  updateTable: {
    type: Function,
    required: true
  }
});

interface TableItem {
  id: number;
  title: string;
  resourceUrl: string;
  des: string;
  publishTime: string;
  insertTime: string;
}

const query = reactive({
  key: "",
  page: 1,
  size: 6,
});

const getData = () => {
  milestone.selectPages(query, (res) => {
    if (res.code === 200) {
      console.log(res);
      tableData.value = res.data.list;
      pageTotal.value = Number(res.data.total) || 50;
    }
  });
};

getData();

const preView = (item) => {
  window.open(`${base.newsroom}/article/${item.id}`, "_blank");
};

const choose = (item) => {
  props.update(item, props.updateTable);
};

// 查询操作
const handleSearch = () => {
  query.page = 1;
  getData();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.page = val;
  getData();
};
import {getCurrentInstance} from "vue";

const {proxy}: any = getCurrentInstance()
const dateFormat = (row, column, value) => {
  return proxy.$dateFormat(value, "MM/dd/yyyy")
}
</script>

<style>
.search-box {
  margin-bottom: 20px;
}

.search-input {
  margin-right: 10px;
  width: 500px;
}

.image-container {
  width: 100%;
  max-height: 900px;

  .epc-card {
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    margin-right: 20px;

    img {
      width: 250px;
      height: 250px;
      object-fit: cover;
      transition: all 0.6s;
    }
  }
}
</style>
